<template>
  <div class="student">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>当前值：{{ number }}</h2>
    <button @click="addNum">自增number</button>

    <Button @click="sendStudentName">发送学生名称到App</Button>
    <Button @click="unbind">解绑 customClick 事件</Button>

    <button @click="destroyM">销毁当前Student组件的实例</button>
  </div>
</template>

<script>
export default {
  name: "StudentItem",
  data() {
    return {
      name: "李四",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    sendStudentName() {
      // $emit 可自定义触发事件名，并且可传任意参数
      // 触发StudentItem组件实例上的 clickStudent 事件
      this.$emit("customClick", this.name, 666, 888, 999);
      this.$emit("demo");
    },
    unbind() {
      // 解绑一个自定义事件
      // this.$off("customClick");

      // this.$off(["customClick", "demo"]); // 解绑多个自定义事件

      // 解绑所有自定义事件
      this.$off();
    },
    destroyM() {
      this.$destroy(); //销毁当明的StudentItem组件的实例，销毁后所有StudnetItem实例的自定义事件全都无效
    },
    addNum() {
      console.log("addNum回调被调用了");
      this.number++;
    },
  },
};
</script>

<style scoped lang="less">
.student {
  background-color: orchid;
  padding: 5px;
  margin-top: 30px;
}
</style>
